<template>
    <!-- 商品详情 -->
    <view class="page-container bg-white">
        <view class="list">
            <view class="list-item" v-for="(item, index) in list" :key="index">
                <view class="list-item__top">
                    <view class="list-item__left">
                        <image class="user-avatar" :src="item.avatar" mode="aspectFill"> </image>
                        <view class="user-name">{{ item.nickname }}</view>
                    </view>
                    <view class="rate">
                        <uni-rate :size="15" :value="item.rate" readonly />
                    </view>
                </view>
                <view class="list-item__center">{{ item.desc }} </view>
                <view class="list-item__date">{{ item.created_at }}</view>
            </view>
        </view>
        <!-- <load-more :loadingType="loadingType" /> -->
    </view>
</template>

<script>
export default {
    data() {
        return {
            loadingType: "",
            list: [],
            params: {
                page: 1,
                pagesize: 10
            },
            loading: false
        }
    },
    onLoad() {
        this.loadData()
    },
    methods: {
        async loadData(type = "refresh") {
            try {
                if (type === "refresh") {
                    this.$showLoading("加载中")
                    this.params.page = 1
                } else if (this.loadingType === "nomore") return
                this.loadingType = "loading"
                // let { list, total } = await this.$api.goodsEvaluation(this.params);
                let list = [
                    {
                        avatar: require("@/static/img/avatar.jpg"),
                        nickname: "大钱mr",
                        created_at: "2023-05-08 16:00:00",
                        rate: 5,
                        desc: "现场环境活跃气氛很好"
                    },
                    {
                        avatar: require("@/static/img/avatar.jpg"),
                        nickname: "大钱mr",
                        created_at: "2023-05-08 16:00:00",
                        rate: 5,
                        desc: "现场环境活跃气氛很好"
                    },
                    {
                        avatar: require("@/static/img/avatar.jpg"),
                        nickname: "大钱mr",
                        created_at: "2023-05-08 16:00:00",
                        rate: 5,
                        desc: "现场环境活跃气氛很好"
                    }
                ]
                await this.$setTime(300)
                let loadingType = ""
                if (type === "refresh") {
                    this.list = list
                    if (list.length === 0) loadingType = "nodata"
                    uni.hideLoading()
                } else {
                    this.list = this.list.concat(list)
                }
                if (this.list.length === total && total !== 0) {
                    loadingType = "nomore"
                }
                if (!loadingType) this.params.page++
                this.loadingType = loadingType
            } catch {
                this.loadingType = ""
            }
        }
    },
    onReachBottom() {
        this.loadData("more")
    },
    onUnload() {}
}
</script>

<style lang="scss" scoped>
.list {
    padding-top: 20rpx;
    border-top: 20rpx #f2f4f7 solid;
    &-item {
        position: relative;
        padding: 30rpx 30rpx 20rpx 30rpx;
        &:not(:last-child)::after {
            @include _border;
        }
        &__top {
            display: flex;
            margin-bottom: 20rpx;
        }
        .user-avatar {
            width: 82rpx;
            height: 82rpx;
            border-radius: 10rpx;
            margin-right: 10rpx;
        }
        .rate {
            display: flex;
            align-items: center;
        }
        &__left {
            flex: 1;
            display: flex;
            align-items: center;
        }
        &__date {
            display: flex;
            justify-content: flex-end;
            color: #999;
            font-size: 24rpx;
        }
        .user-name {
            font-size: 28rpx;
            color: #333;
        }
        &__center {
            margin-bottom: 10rpx;
            font-size: 28rpx;
            color: #333333;
            word-break: break-all;
        }
    }
}
</style>
